<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px;`">
      <div class="left_select">
          <div class="position_box">
              <div class="position_box_fixed">
                  <div class="select_box" :class="{active:select_status==2}"  @click="select_status=2">
                      <span class="desc">SOC校正</span>
                  </div>
                  <div class="select_box" :class="{active:select_status==3}"  @click="select_status=3">
                      <span class="desc">SOH校正</span>
                  </div>
                  <div class="select_box" :class="{active:select_status==4}" @click="select_status=4">
                      <span class="desc">分析历史</span>
                  </div>
                  <div class="select_box" :class="{active:select_status==1}" @click="select_status=1">
                      <span class="desc">数据导出</span>
                  </div>
              </div>
          </div>
      </div>
      <div class="fooder_btn" v-if="select_status==2 || select_status==3" style="display: flex;align-items: center;justify-content: flex-start;">
          <a-button
            type="primary"
            @click="goupdata(record.id)"
          >
            重新校正
          </a-button>
          <span style="margin-left: 10px;color: #6E7584;font-size: 14px;">最近校正时间：2023-08-09 16:50:56</span> 
      </div>

    <div class="table_box">
        <div class="" style="display: flex;margin-bottom: 20px;">
            <selectObj :level="2" @change="setId($event,1,'so_unit_id')"></selectObj>
        </div>
        <div class="unit_box" v-if="select_status==2 || select_status==3">
            <div class="unit" :class="{active:unitInfo.selectIndex==i}" v-for="(res,i) in unitInfo.es_cluster" :key="i" @click="setSelectIndex(res,i)">
                <div class="unit_p">
                    <img src="../../assets/img/unit/单簇.png" >
                    <span class="unit_desc">{{res.name}}</span>
                    <div class="unit_data">
                        <!-- <span class="unit_dataSpan">-{{res.name}}.0%</span> -->
                    </div>
                </div>
            </div>
        </div>
        <div v-if="select_status==2">
            <div class="realTime_box">
                <div class="realTime_title">
                    <span class="icon  iconfont icon-wuchaquxian"></span>
                    <span class="desc">1#电池簇SOC误差曲线</span>
                </div>
                <div class="charts_trend">
                    <div id="charts_trend" style="width: 100%; height: 300px"></div>
                </div>
            </div>
            <div class="info_box" style="display: flex;">
                <div class="realTime_box" style="flex: 2;margin-right: 20px;">
                    <div class="realTime_title">
                        <span class="icon iconfont icon-zhenduan-baogaogaishu"></span>
                        <span class="desc">误差信息</span>
                    </div>
                    <div class="info_data" >
                        <div class="info_data_box">
                            <span class="title">充电截至SOC：</span>
                            <span class="data">{{corrections.deviation['充电截至SOC']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">放电截至SOC：</span>
                            <span class="data">{{corrections.deviation['放电截至SOC']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">最大SOC误差：</span>
                            <span class="data">{{corrections.deviation['最大SOC误差']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">损失电量估算：</span>
                            <span class="data">14kWh</span>
                        </div>
                    </div>
                </div>
                <div class="realTime_box" style="flex: 3;margin-right: 20px;">
                    <div class="realTime_title">
                        <span class="icon iconfont icon-dianchimozulisanfenxi"></span>
                        <span class="desc">电池模组SOC误差排行</span>
                    </div>
                    <div class="info_table">
                        <a-table
                          :columns="columns2"
                          :rowKey="(record) => record.id"
                          :data-source="corrections.deviation_rank['电池模组SOC误差排行']"
                          :pagination="false"
                          :show-total="total => `Total ${total} items`"
                          :loading="loading"
                        >
                         
                        </a-table>
                    </div>
                </div>
                <div class="realTime_box" style="flex: 3;margin-right: 20px;">
                    <div class="realTime_title">
                        <span class="icon iconfont icon-zhenduan-tongjikongjianfenbu"></span>
                        <span class="desc">电芯SOC误差排行</span>
                    </div>
                    <div class="info_table">
                        <a-table
                          :columns="columns2"
                          :rowKey="(record) => record.id"
                          :data-source="data"
                          :pagination="false"
                          :show-total="total => `Total ${total} items`"
                        >
                        </a-table>
                    </div>
                </div>
                <div class="realTime_box" style="flex: 2;">
                    <div class="realTime_title">
                        <span class="icon iconfont icon-xiaozhengjianyi-01"></span>
                        <span class="desc">校正建议</span>
                    </div>
                    <div class="info_data">
                        <div class="info_data_box">
                            <span class="title">建议充电截至SOC：</span>
                            <span class="data">{{corrections.advice['建议充电截至SOC']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">建议放电截至SOC：</span>
                            <span class="data">{{corrections.advice['建议放电截至SOC']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">检查/更换BMU建议：</span>
                            <span class="data">{{corrections.advice['检查更换BMU建议']}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="" v-if="select_status==3">
            <div class="realTime_box">
                <div class="realTime_title">
                    <span class="icon iconfont icon-wuchaquxian"></span>
                    <span class="desc">1#电池簇SOH误差曲线</span>
                </div>
                <div class="charts_trend">
                    <div id="charts_trend" style="width: 100%; height: 300px"></div>
                </div>
            </div>
            <div class="info_box" style="display: flex;">
                <div class="realTime_box" style="flex: 2;margin-right: 20px;">
                    <div class="realTime_title">
                        <span class="icon iconfont icon-zhenduan-baogaogaishu"></span>
                        <span class="desc">误差信息</span>
                    </div>
                    <div class="info_data" >
                        <div class="info_data_box">
                            <span class="title">充电截至SOH：</span>
                            <span class="data">{{corrections.deviation['充电截至SOC']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">放电截至SOH：</span>
                            <span class="data">{{corrections.deviation['放电截至SOC']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">最大SOH误差：</span>
                            <span class="data">{{corrections.deviation['最大SOC误差']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">损失电量估算SOH：</span>
                            <span class="data">14kWh</span>
                        </div>
                    </div>
                </div>
                <div class="realTime_box" style="flex: 3;margin-right: 20px;">
                    <div class="realTime_title">
                        <span class="icon  iconfont icon-dianchimozulisanfenxi"></span>
                        <span class="desc">电池模组SOH误差排行</span>
                    </div>
                    <div class="info_table">
                        <a-table
                          :columns="columns2"
                          :rowKey="(record) => record.id"
                          :data-source="corrections.deviation_rank['电池模组SOH误差排行']"
                          :pagination="false"
                          :show-total="total => `Total ${total} items`"
                          :loading="loading"
                        >
                         
                        </a-table>
                    </div>
                </div>
                <div class="realTime_box" style="flex: 3;margin-right: 20px;">
                    <div class="realTime_title">
                        <span class="icon  iconfont icon-zhenduan-tongjikongjianfenbu"></span>
                        <span class="desc">电芯SOH误差排行</span>
                    </div>
                    <div class="info_table">
                        <a-table
                          :columns="columns2"
                          :rowKey="(record) => record.id"
                          :data-source="data"
                          :pagination="false"
                          :show-total="total => `Total ${total} items`"
                        >
                        </a-table>
                    </div>
                </div>
                <div class="realTime_box" style="flex: 2;">
                    <div class="realTime_title">
                        <span class="icon iconfont icon-xiaozhengjianyi-01"></span>
                        <span class="desc">校正建议</span>
                    </div>
                    <div class="info_data">
                        <div class="info_data_box">
                            <span class="title">建议充电截至SOH：</span>
                            <span class="data">{{corrections.advice['建议充电截至SOC']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">建议放电截至SOH：</span>
                            <span class="data">{{corrections.advice['建议放电截至SOC']}}</span>
                        </div>
                        <div class="info_data_box">
                            <span class="title">检查/更换BMU建议：</span>
                            <span class="data">{{corrections.advice['检查更换BMU建议']}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
          <div class="table_content" v-if="select_status==4">
            <a-table
              :columns="columns3"
              :rowKey="(record) => record.id"
              :data-source="analyses"
              :pagination="pagination3"
              :loading="loading"
              @change="handleTableChange"
            >
              <!-- :show-total="total => `Total ${total} items`" -->
              <div slot="operation" slot-scope="text, record">
                <a-button
                  type="link"
                  style="color: #1890ff"
                  @click="goupdata(record.id)"
                  ghost
                >
                  详细分析
                </a-button>
              </div>
            </a-table>
          </div>
          <div class="table_content" v-if="select_status==1">
              <div class="table_btn" style="margin-bottom: 20px;">
                  <div class="status_btn">
                      <span class="btn" :class="{active:status==1}" @click="status=1">图表</span>
                      <span class="btn" :class="{active:status==2}" @click="status=2">表格</span>
                  </div>
                  <div class="export" v-if="status==2">
                      <a-button
                        @click="goupdata(record.id)"
                      >
                        导出
                      </a-button>
                  </div>
              </div>
              <div class="" v-if="status==1">
                  <div id="charts_table" style="width: 100%; height: 300px"></div>
              </div>
                <div class="" v-if="status==2">
                    <a-table
                      :columns="columns"
                      :rowKey="(record) => record.id"
                      :data-source="esUnitsReport"
                      :pagination="pagination"
                      :show-total="total => `Total ${total} items`"
                      :loading="loading"
                      @change="handleTableChange"
                    >
                      <div slot="operation" slot-scope="text, record">
                        <a-button
                          type="link"
                          style="color: #1890ff"
                          @click="goupdata(record.id)"
                          ghost
                        >
                          详细分析
                        </a-button>
                      </div>
                    </a-table>
                </div>
          </div>
    </div>


  </div>
</template>

<script>
import { mapState } from "vuex";
import { gets,del,get } from "@/services";
import { getSearchCriteria } from "@/utils/util"
import selectObj from "@/components/selectObj/selectObj"
export default {
    components: {
        selectObj
    },
  data() {
    return {
      columns: [
        {title: "采集时间",dataIndex: "created_at",key: "created_at"},
        {title: "所在位置",dataIndex: "name",key: "name"},
        {title: "电压",dataIndex: "voltage",key: "voltage"},
        {title: "电流",dataIndex: "current",key: "current"},
        {title: "温度",dataIndex: "temperature",key: "temperature"},
      ],
      columns2: [
        {title: "排名",dataIndex: "rank",key: "rank",className:'column-white'},
        {title: "名称",dataIndex: "name",key: "name",className:'column-white'},
        {title: "误差值",dataIndex: "deviation",key: "deviation",className:'column-white'},
        {title: "损失能量",dataIndex: "loss_power",key: "loss_power",className:'column-white'}
      ],
      columns3: [
        {title: "分析对象",dataIndex: "dev_id",key: "dev_id"},
        {title: "分析类型",dataIndex: "type",key: "type"},
        {title: "分析时间",dataIndex: "created_at",key: "created_at"},
        {title: "分析结果",dataIndex: "result",key: "result"},
        {title: "操作人",dataIndex: "user_name",key: "user_name"},
      ],
      status:2,
      select_status:4,
      pagination: {
        pageSize: 10,
      },
      pagination3:{
          pageSize: 10,
      },
      searchData:{
        name:''
      },
      loading: false,
      data: [],
      analyses:[],
      so_unit_id:'',
      unitInfo:{
          es_cluster:[]
      },
      esUnitsReport:[],
      corrections:{}
    };
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  watch:{
    status:function(n,o){
        if(n==1){
            setTimeout(()=>{
                this.init_charts_table('charts_table')
            },100)
        }
    },
    select_status:function (n,o) {
        if(n==2 || n==3){
            
            setTimeout(()=>{
                this.init_nedw_trend("charts_trend", { future:[{date:'1',Voltage:2,Current:3,Current2:6}], history:[{date:'2',Current2:7,Voltage:4,Current:23}]},n);  
            },100)
        }else if(n==1 && this.status==1){
            setTimeout(()=>{
                this.init_charts_table('charts_table')
            },100)
        }
    }
  },
  created() {
      let _this = this
    this.fetch({limit:10})
    get(6,'esUnits').then(({data})=>{
        if(data.code==20000){
            this.unitInfo = data.data
            this.unitInfo.selectIndex = 0
            _this.getAnalyses()
            get('6/report','esUnits').then(res=>{
                if(res.data.code==20000){
                    this.esUnitsReport = res.data.data
                }
            })
            get('6/predict','esUnits')
            get('6/report','esClusters')
            get('6/predict','esClusters')
            gets({search:'dev_type:App\Models\ESCluster;dev_id:6',searchFields:'dev_type:=;dev_id:=',searchJoi:'and'},'corrections').then(res=>{
                if(res.data.code==20000){
                    let d = res.data.data.data
                    this.corrections = d[d.length-1]
                }
            })
        }
    })
  },
  mounted() {
      setTimeout(()=>{
          this.init_nedw_trend("charts_trend", { future:[{date:'1',Voltage:2,Current:3,Current2:6}], history:[{date:'2',Current2:7,Voltage:4,Current:23}]}); 
          this.init_charts_table('charts_table')
      },100)
  },
  methods: {
      // 获取分析历史tab数据
      getAnalyses(){
          gets({e_s_unit_id:4},'analyses').then(e=>{
              if (e.data.code==20000) {
                  this.analyses=e.data.data.data
              }
          })
      },
      // 获取数据导出tab数据
      getReport(){
          
      },
      //获取SOC校正
      //获取SOH校正
      setId(e,i,n){
          console.log(e,i,n);
          if(e.length>i){
            this[n] = e[i]  
          }
      },
      setSelectIndex(e,i){
        this.unitInfo.selectIndex = i
          console.log(this.unitInfo);
        this.$forceUpdate()
      },
      init_charts_table(id){
          var legend = ["BMS计算值", "算法校正值",'误差值'];
          let option  = {
                title: {
                    text: '储能单元电压（V）',
                     textStyle :{
                         fontSize:12,
                         fontWeight:200
                     }
                },
                color:['#206EF7', '#00DCD8', '#3E20F7', '#F76720', '#3EBB55', '#FFE300'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['1#电池簇','2#电池簇','3#电池簇','4#电池簇','5#电池簇'],
                    right:25
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
               
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLine: {
                      lineStyle: {
                        color: "#C3CBD5",
                      },
                    },
                },
                yAxis: {
                    type: 'value',
                    //坐标轴文字标签
                    axisLabel: {
                      show: true
                    },
                    //坐标轴线
                    axisLine: {
                      show: true,
                      lineStyle: {
                        color: "#C3CBD5",
                      },
                    },
                    //分割线/网格样式
                    splitLine: {
                      show: true,
                      lineStyle: {
                        width: 1,
                        type: "dotted", //实心，solid | dotted | dashed，
                      },
                    },
                },
                series: [
                    {
                        name:'1#电池簇',
                        type:'line',
                        stack: '总量',
                        data:[120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name:'2#电池簇',
                        type:'line',
                        stack: '总量',
                        data:[220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name:'3#电池簇',
                        type:'line',
                        stack: '总量',
                        data:[150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name:'4#电池簇',
                        type:'line',
                        stack: '总量',
                        data:[320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name:'5#电池簇',
                        type:'line',
                        stack: '总量',
                        data:[820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };
          var myChart2 = this.$echarts.init(document.getElementById(id));
          // 使用刚指定的配置项和数据显示图表
          myChart2.setOption(option);
          window.addEventListener("resize", function () {
            myChart2.resize();
          });
      },
      init_nedw_trend(id, data,status) {
        let { future, history} = data;
        let time = [...history, ...future].map((e) => e.date);
      
        var legend = ["BMS计算值", "算法校正值",'误差值'];
        var voltage = [...history, ...future].map((e) => e.Voltage);
        var current = [...history, ...future].map((e) => e.Current);
        var current2 = [...history, ...future].map((e) => e.Current2);
      
        let option = {
          //默认色板
          color: ["#dd3ee5", "#12e78c", "#fe8104"],
          //标题，可以自定义标题的位置和样式
          title: {
            //text: '服务指标'
          },
          //鼠标hover提示框
          tooltip: {
            trigger: "axis", //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
            axisPointer: {
              //坐标轴指示器，坐标轴触发有效，
              type: "cross", //默认为line，line直线，cross十字准星，shadow阴影
              crossStyle: {
                color: "#fff",
              },
            },
          },
      
          //图例
          legend: {
            data: legend, //注意：图例的名字必须跟下面series数组里面的name一致
            itemHeight: 9, //改变圆圈大小
            top:15,
            icon: "circle",
            textStyle: {
              color: "#333", // 图例文字颜色
            },
          },
           grid: {
              left: '4%',
              right: '5%',
              bottom: '5%'
            },
          xAxis: [
            {
              type: "category",
              data: time,
              axisLabel: {
                formatter: function (value, idx) {
                  var date = new Date(value);
                  return idx === 0
                    ? value
                    : [date.getMonth() + 1, date.getDate()].join("-");
                },
                
                margin: 15
              },
              axisLine: {
                lineStyle: {
                  color: "#C3CBD5",
                },
              },
              axisTick: {
                show: false,
              },
              boundaryGap: false,
            },
          ],
          yAxis: [
            //第一个Y轴
            {
              position: "left",
              type: "value", //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
              name: status==3?"SOH（%）":"SOC（%）",
              //坐标轴文本样式，nameTextStyle和axisLabel区别是，前者管坐标轴顶端文字（坐标轴标题），或者管轴上断点的文字标签
              nameTextStyle: {
                padding: 10, //内边距
              },
              min:0,
              max:100,
              //坐标轴文字标签
              axisLabel: {
                show: true
              },
              //坐标轴线
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#C3CBD5",
                },
              },
              //分割线/网格样式
              splitLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  type: "dotted", //实心，solid | dotted | dashed，
                },
              },
            },
            //第二个Y轴
            {
              position: "right",
              type: "value",
              name: "误差值（%）",
              min:0,
              max:10,
              nameTextStyle: {
                padding: 10,
              },
              axisLabel: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#C3CBD5",
                },
              },
              //分割线/网格
              splitLine: {
                show: true, //是否显示网格
                lineStyle: {
                  width: 1,
                  type: "dotted",
                },
              },
            },
          ],
          series: [
            {
              name: "BMS计算值",
              type: "line", //数据表现形式（bar为柱形图，line为折线图）
              yAxisIndex: 0, //选择index为1的Y轴作为参考系
              data: current,
              //线条样式，如折线图
              itemStyle: {
                normal: {
                  color: '#206EF7',
                  barBorderRadius: [10, 10, 10, 10],
                },
              },
            },
            {
              name: "算法校正值",
              type: "line",
              yAxisIndex: 1, //选择index为1的Y轴作为参考系
              data: voltage,
              itemStyle: {
                normal: {
                  color: "#00DCD8",
                  barBorderRadius: [10, 10, 10, 10],
                },
              },
            },
            {
              name: "误差值",
              type: "line",
              yAxisIndex: 1, //选择index为1的Y轴作为参考系
              data: current2,
              itemStyle: {
                normal: {
                  color: "#3E20F7",
                  barBorderRadius: [30, 40, 50, 60],
                },
              },
            },
          ],
        };
        var myChart = this.$echarts.init(document.getElementById(id));
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      handleChange(){
          
      },
      onOk(){
          
      },
      onChange(){
          
      },
      change(){
          
      },
    handleTableChange(pagination, filters) {
      console.log(pagination,filters);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        page: pagination.current,
        limit: pagination.pageSize,
        ...filters,
      });
    },
    fetch(params = {}) {
      // this.loading = true;
      // gets({
      //   ...params,
      //   ...(getSearchCriteria(this.searchData))
      // },'users').then(({ data }) => {
      //   if (data.code == 20000) {
        let res = {data:[{
            name1:'2021-02-20 18:18:18',
            name2:'2#处理单元',
            name3:'1#-1#',
            name3:'温度太高',
            name4:'4',
            name5:'--',
            name6:'--',
            name7:'未处理'
        }],total:20};
        this.data = res.data;
        this.pagination = {
          total: res.total,
        };
      // }
      //   this.loading = false;
      // });
    },
    delData(id) {
      let _this = this
      this.$confirm({
        title: "是否确定删除这条数据?",
        content: "数据删除后将无法恢复",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          del(id,'users').then(({ data }) => {
            if (data.code == 20000) {
              _this.$message.success("删除成功");
              console.log(_this.pagination);
              let i = 0;
              if (_this.data.length == 1) {
                i = 1;
              }
              _this.fetch({ limit: 10, page: _this.pagination.current - i });
            }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    goupdata(id) {
      this.$router.push(`/account/member/updata?id=${id}`);
    },
    goadd(){
      this.$router.push(`/account/member/add`);
    },
    onSearch() {
      this.fetch({limit:10})
    },
  },
};
</script>

<style scoped lang="less">
    .fooder_btn{
        position: fixed;
        bottom: 0;
        background-color: #fff;
        width: 100vw;
        left: 0;
        padding: 10px 0;
        box-shadow: 0 0 20px rgba(0,0,0,0.13);
        z-index: 999;
        button{
            margin-left: 220px;
        }
        
    }
.table_btn{
    display: flex;
    justify-content: space-between;
    .status_btn{
        background: #FFFFFF;
        border: 1px solid #E6EAF2;
        border-radius: 4px 0px 0px 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6E7584;
        cursor: pointer;
        .btn{
            display: inline-block;
            padding: 9px 16px;
        }
        .btn:nth-of-type(1){
            border-right: 1px solid #F7F8FA;
        }
        .active{
            background: #F7F8FA;
            color: #000000;
        }
    }
    .export{
        
    }
}
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  text-align: center;
  border-radius: 4px;
  display: flex;
    .left_select{
        width: 200px;
        position: relative;
        padding-left: 20px;
        .position_box{
            position: absolute;
            top: 20px;
            left: 20px;
            width: 160px;
            min-height: 77vh;
            .position_box_fixed{
                position: fixed;
                top: 84px;
                left: 20px;
                width: 160px;
                min-height: 77vh;
                background: #F3F9FD;
                border: 1px solid #F0F0F3;
                border-radius: 6px;
                .select_box{
                    height: 40px;
                    border-radius: 4px;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    line-height: 40px;
                    color: #000000;
                    text-align: left;
                    padding:0 10px;
                    cursor: pointer;
                    
                }
                .active{
                    background: #206EF7;
                    color: #FFFFFF;
                }
            }
        }
    }
  .table_box {
    padding: 16px 23px;
    margin-left: 10px;
    width: 100%;
    .table_header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 24px;
    }
    .unit_box{
        margin: 20px;
        height: 190px;
        display: flex;
        overflow-y: auto;
        width: calc(100vw - 260px);
        .unit{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            height: 170px;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            min-width: 150px;
            width: 150px;
            .unit_p{
                position: relative;
                img{
                    width: 90px;
                    height: 107px;
                }
                
                .unit_desc{
                    display: block;
                    width: 100%;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #000000;
                    margin-top: 10px;
                }
                .unit_data{
                    position: absolute;
                    height: 36px;
                    top: 48px;
                    left: 0;
                    width: 100%;
                    justify-content: center;
                   .unit_dataSpan{
                       background: #6199FA;
                       border: 1px solid #206EF7;
                       font-size: 13px;
                       font-family: PingFang SC;
                       font-weight: 500;
                       color: #FFFFFF;
                       opacity: 0.6;
                       height: 25px;
                       line-height: 25px;
                       display: inline-block;
                       border-radius:6px;
                       padding:0 10px;
                   }
                }
            }
        }
        .unit:hover{
            background: #cbf4fc;
        }
        .active{
            background-color:#E7F7FC ;
        }
    }
  }
}
  
    .realTime_box{
        margin-top: 10px;
        .select_box{
            height: 40px;
            background: #F7F8FA;
            border-radius: 0px 4px 0px 0px;
            display: flex;
            margin-bottom: 15px;
            span{
                display: inline-block;
                line-height: 40px;
                padding: 0 15px;
                cursor: pointer;
                text-align: center;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #7A8794;
            }
            .active{
                background-color: #fff;
                color: #206EF7;
            }
        }
        .realTime_title{
          height: 36px;
          background: #F7F8FA;
          border-radius: 4px 4px 0px 0px;
          text-align: left;
          line-height: 36px;
          display: flex;
          align-items: center;
          font-size: 14px;
          padding-right: 20px;
          .icon{
              display: inline-block;
              width: 20px;
              height: 20px;
              line-height: 20px;
              color: #1890ff;
              text-align: center;
              font-size: 14px;
              border-radius: 50%;
              background-color: #fff;
              border: 1px solid #1890ff;
              margin: 0 10px 0 26px;
          }
          .desc{
              
          }
          .btn{
              margin-left: auto;
              font-family: PingFang SC;
              font-weight: 500;
              color: #206EF7;
              cursor: pointer;
          }
      }  
        .status_box{
            display: flex;
            justify-content: space-between;
            padding: 20px 0;
            .status{
                display: flex;
                align-items: center;
                div{
                    margin-right: 20px;
                    .icon{
                        display: inline-block;
                        border: 4px solid red;
                        border-radius: 50%;
                        background-color: red;
                    }
                    .desc{
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin-left: 5px;
                    }
                }
            }
            .status_btn{
                background: #FFFFFF;
                border: 1px solid #E6EAF2;
                border-radius: 4px 0px 0px 4px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #6E7584;
                cursor: pointer;
                .btn{
                    display: inline-block;
                    padding: 9px 16px;
                }
                .btn:nth-of-type(1){
                    border-right: 1px solid #F7F8FA;
                }
                .active{
                    background: #F7F8FA;
                    color: #000000;
                }
            }
        }
        .bulletinBoard{
            .row4,.row5{
                display: flex;
                margin-bottom: 14px;
                gap:16px;
                span{
                    flex: 1;
                    display: inline-block;
                    text-align: center;
                    height: 66px;
                    line-height: 66px;
                    background: #16E6FF;
                    border-radius: 4px;
                }
            }
        
        }
    
        .info_data{
            text-align: left;
            padding-left: 20px;
            padding-top: 10px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 26px;
            .info_data_box{
                .data{
                    color: #3EBB55;
                    font-size: 13px;
                }
            }
        }
    }
</style>